{% extends "admin/base/base_add.html" %}
{% block title %}<title>添加文章</title>{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{{ url_for("static",filename="lib/edit.markdown/css/editormd.css") }}">
{% endblock %}
{% block form %}
    <form role="form" method="post" class="form form-horizontal" id="form-admin-add" enctype="multipart/form-data">
        <div class="row cl">
            <div class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>{{ form.top.label }}：</div>
            <div class="formControls col-xs-4 col-sm-3">
                {{ form.top }}
                {% for error in form.top.errors %}
                    <span class="c-red">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="row cl">
            <div class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>{{ form.category_id.label }}：</div>
            <div class="formControls col-xs-4 col-sm-3">
                <span class="select-box">{{ form.category_id }}</span>
                {% for error in form.category_id.errors %}
                    <span class="c-red">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="row cl">
            <div class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>文章封面图片：</div>
            <div class="formControls col-xs-8 col-sm-9">
                {{ form.image }}
                {% for error in form.image.errors %}
                    <span class="c-red">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="row cl">
            <div class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>{{ form.title.label }}：</div>
            <div class="formControls col-xs-8 col-sm-9">
                {{ form.title }}
                {% for error in form.title.errors %}
                    <span class="c-red">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="row cl">
            <div class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>{{ form.url_title.label }}：</div>
            <div class="formControls col-xs-8 col-sm-9">
                {{ form.url_title }}
                {% for error in form.url_title.errors %}
                    <span class="c-red">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="row cl">
            <div class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>{{ form.keywords.label }}：</div>
            <div class="formControls col-xs-8 col-sm-9">
                {{ form.keywords }}
                {% for error in form.keywords.errors %}
                    <span class="c-red">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="row cl">
            <div class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>{{ form.description.label }}：</div>
            <div class="formControls col-xs-8 col-sm-11">
                {{ form.description }}
                {% for error in form.description.errors %}
                    <span class="c-red">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="row cl">
            <div class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>{{ form.content.label }}：</div>
            <div class="formControls col-xs-8 col-sm-11">
                <div id="markdown">
                    <textarea name='markdown' style="display:none;"></textarea>
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>{{ form.relationship.label }}：</div>
            <div class="formControls col-xs-8 col-sm-11">
                {{ form.relationship }}
                {% for error in form.relationship.errors %}
                    <span class="c-red">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="row cl">
            <div class="form-label col-xs-4 col-sm-1"><span class="c-red">*</span>{{ form.status.label }}：</div>
            <div class="formControls col-xs-8 col-sm-2">
                {{ form.status }}
                {% for error in form.status.errors %}
                    <span class="c-red">{{ error }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                {{ form.csrf_token }}
                {{ form.submit }}
            </div>
        </div>
    </form>
{% endblock %}
{% block frontend %}
    <script type="text/javascript"
            src="{{ url_for('static',filename='admin/lib/jquery.validation/1.14.0/jquery.validate.js') }}"></script>
    <script type="text/javascript"
            src="{{ url_for('static',filename='admin/lib/jquery.validation/1.14.0/validate-methods.js') }}"></script>
    <script type="text/javascript"
            src="{{ url_for('static',filename='admin/lib/jquery.validation/1.14.0/messages_zh.js') }}"></script>
    <script type="text/javascript"
            src="{{ url_for('static',filename='lib/kindeditor/kindeditor-all-min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='lib/edit.markdown/editormd.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static',filename='admin/h-ui.admin/js/dialog.js') }}"></script>
    {% for message in get_flashed_messages(category_filter=["error"]) %}
        <script type="text/javascript">
            var msg = "{{ message }}";
            if (msg) {
                dialog.error(msg);
            }
        </script>
    {% endfor %}
    {% for message in get_flashed_messages(category_filter=["ok"]) %}
        <script type="text/javascript">
            var msg = "{{ message }}";
            if (msg) {
                dialog.success(msg);
            }
        </script>
    {% endfor %}
    <script type="text/javascript">
        KindEditor.ready((function (K) {
            window.editor = K.create('#editor1', {
                width: "100%",
                height: "200px",
                LangType: "zh-CN",
                filterMode: false,
                afterCreate: function () {
                    this.sync();
                },
                afterBlur: function () {
                    this.sync();
                }
            })
        }))
    </script>
    <script type="text/javascript">
        var Editor;
        $(function () {
            Editor = editormd("markdown", {
                width: "100%",
                height: 740,
                path: "{{ url_for("static",filename="lib/edit.markdown/lib/") }}",
                htmlDecode: "style,script,iframe",
                tex: true,
                emoji: true,
                taskList: true,
                flowChart: true,
                sequenceDiagram: true,
                saveHTMLToTextarea: true,
                markdown : "##在这里尽情的书写你娴熟的markdown吧",
                //image upload
                imageUpload: true,
                imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                imageUploadURL: "{{ url_for('admin.markdown') }}"
            });
        });
    </script>
{% endblock %}